<template>
  <div ref="container" class="w-p100 h-p100">
    <transition name="fade1">
      <div v-if="status === 2"  ref="screen" class="screen-big">
        <div class="message box box-ac">
          <div :style="{'background-image': 'url('+uploadUser.head+')'}" class="head icon"></div>
          <div class="text">{{uploadUser.name}}在{{uploadUser.addtime_show}}上载</div>
        </div>
        <div class="face-content w-p100 h-p100">
          <img class="face" :src="josnData.face_base64" alt="">
          <img class="sticker"
            :style="{
              width: item.w,
              'z-index': item.zIndex,
              '-webkit-transform': `translate3d(${item.translateObj.x}px, ${item.translateObj.y}px, 0) scale(${item.translateObj.scale}) rotate(${item.translateObj.rotate}deg)`
            }"
            :src="item.img"
            v-for="(item, index) in josnData.stickerList" :value="item" :key="index" alt="">
        </div>
      </div>
    </transition>
    <!-- <div class="line"></div> -->
    <div v-if="status === 1" class="page">
      <div class="welcome">
        <img class="welcome1" :src="require('../assets/images/welcome1.png')" alt="">
        <img class="welcome2" :src="require('../assets/images/welcome2.png')" alt="">
        <div class="center">
          <img class="welcome3 animated fadeInLeftBig" :src="require('../assets/images/welcome3.png')" alt="">
          <img class="welcome4 animated fadeInDownBig" :src="require('../assets/images/welcome4.png')" alt="">
          <img class="welcome5 animated fadeInUpBig" :src="require('../assets/images/welcome5.png')" alt="">
          <img class="welcome6 animated fadeInRightBig" :src="require('../assets/images/welcome6.png')" alt="">
        </div>
        <!-- <canvas ref="qrcode" class="code animated fadeInUpBig"></canvas> -->
        <img class="code animated fadeInUpBig" :src="codeUrl" alt="">
      </div>
      <div class="bottom animated fadeInUp">
        <div class="trapezoid1"></div>
        <div class="trapezoid2"></div>
        <img class="logo animated fadeIn" :src="require('../assets/images/logo.png')" alt="">
        <div class="screen">
          <div class="head-list">
            <transition name="fade">
              <img v-if="headIndex===index" v-for="(item, index) in headList" :value="item" :key="index" :src="item" alt="">
            </transition>
          </div>
        </div>
      </div>
      <cloud></cloud>
      <img class="screen-title animated bounceIn" :src="require('../assets/images/screen-title.png')" alt="">
    </div>
    <audio ref="audio" autoplay class="audio" :src="require('../assets/media/music.mp3')" style="display:none" loop preload></audio>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { stickerList } from '@/assets/js/constants'
import cloud from '@/components/cloud'
import QRCode from 'qrcode'
export default {
  name: 'screen',
  components: {
    cloud
  },
  computed: {
    ...mapState(['activityGuid'])
  },
  data () {
    return {
      josnData: null,
      status: 1,
      codeUrl: require('../assets/images/code.png'),
      headList: [
        require('../assets/images/head1.jpg'),
        require('../assets/images/head2.jpg'),
        require('../assets/images/head3.jpg'),
        require('../assets/images/head4.jpg'),
        require('../assets/images/head5.jpg')
      ],
      headIndex: 0,
      uploadUser: {}
    }
  },
  mounted () {
    this.initScreen()
    this.ledscreenLedLatest()
    setInterval(() => {
      this.ledscreenLedLatest()
    }, 1000 * 20)
    this.$refs.audio.play()
    // this.resetQRcode()
    // setInterval(() => {
    //   this.resetQRcode()
    // }, 1000 * 60 * 2)
  },
  methods: {
    resetQRcode () {
      QRCode.toDataURL(
        `http://open1.ufunet.cn/pages/h5/2018/0814IFS/app/#/?tmp=${new Date().getTime()}`,
        {
          errorCorrectionLevel: 'L',
          rendererOpts: {
            quality: 0.3
          }
        },
        (err, url) => {
          if (err) throw err
          this.codeUrl = url
        }
      )
    },
    initScreen () {
      this.timer = setInterval(() => {
        if (this.headIndex >= this.headList.length - 1) {
          this.headIndex = 0
        } else {
          this.headIndex++
        }
      }, 5000)
    },
    ledscreenLedLatest () {
      // alert(1)
      this.$http({
        url: `${this.$config.baseUrl}/api/api?ifname=ledscreen.led.latest`,
        method: 'post',
        data: {
          activity_guid: this.activityGuid,
          is_next: 1
        }
      }).then(res => {
        if (+res.status === 1) {
          // console.log(res.data)
          if (!Array.isArray(res.data) && res.data.json_data) {
            let user = res.data.user
            this.uploadUser = {
              name: user.nickname,
              head: user.headimgurl,
              addtime_show: res.data.addtime_show
            }
            this.initStickerList(JSON.parse(res.data.json_data))
          } else {
            this.status = 1
            this.josnData = null
          }
        }
      })
    },
    initStickerList (josnData) {
      // console.log('josnData>>>', josnData)
      this.josnData = {
        face_base64: `http://items.ufunet.cn${josnData.face_base64}`
      }
      // alert(document.body.clientWidth)
      let zoom = document.body.clientWidth / josnData.screenObj.sW
      this.josnData.stickerList = josnData.screenObj.stickerList.map(item => {
        let img
        stickerList.forEach(item1 => {
          if (item1.code === item.code) {
            img = item1.img
          }
        })
        let { x, y, scale, rotate } = item.translateObj
        let stickerItem = {
          img,
          w: item.w,
          zIndex: item.zIndex,
          translateObj: {
            x: zoom * x,
            y: zoom * y,
            scale,
            rotate
          }
        }
        return stickerItem
      })
      this.status = 3
      let img = new Image()
      img.onload = () => {
        this.status = 2
      }
      img.src = this.josnData.face_base64
    },
    next () {
      this.$router.push({
        path: '/recommend'
      })
    }
  }
}
</script>

<style lang="scss" scoped>
// 312*648
@keyframes message {
  15%{
    transform: translateY(0);
  }
  85%{
    transform: translateY(0);
  }
  100%{
    transform: translateY(-100%);
  }
}
.message{
  width:90%;
  left:5%;
  position:absolute;
  z-index:5;
  transform: translateY(-100%);
  background-color:rgba(255,255,255,.8);
  height:1.5rem;
  border:.08rem solid #7fbeb9;
  border-top:0;
  border-bottom-right-radius: .5rem;
  border-bottom-left-radius: .5rem;
  animation: message 8s linear 2s;
  animation-fill-mode: forwards;
  font-size:.32rem;
  .head{
    margin-left:.3rem;
    margin-right:.3rem;
    width:1rem;
    height:1rem;
    border-radius:50%;
    background-color:#999;
  }
}
.screen-big{
  position:absolute;
  z-index:1;
  width:100%;
  height:100%;
  .face-content{
    position:relative;
    overflow:hidden;
    width:100%;
    height:100%;
    .face{
      position:absolute;
      top:0;
      left:0;
      width:100%;
      height:100%;
    }
    .sticker{
      position:absolute;
    }
  }
}
.page{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
}
.welcome{
  position:absolute;
  top:0;
  left:0;
  width:100%;
  height:100%;
  z-index:2;
}
.welcome1,.welcome2,.logo,.welcome-button{
  position:absolute;
  z-index:2;
  animation-delay: 1s;
}
@keyframes welcome {
  to {
    transform:translate3d(0, 0, 0)
  }
}
.welcome1{
  right:0;
  top:-1.6rem;
  width:2.2rem;
  transform:translate3d(2.2rem, -2.2rem, 0);
  animation: welcome 1s linear 1s;
  animation-fill-mode: forwards;
}
.welcome2{
  left:0;
  top:3rem;
  width:1.88rem;
  animation: welcome 1s linear 1s;
  transform:translate3d(-2.2rem, 2.2rem, 0);
  animation-fill-mode: forwards;
}
.center{
  position:absolute;
  top:.7rem;
  left:50%;
  margin-left:-1.65rem;
  width:3.3rem;
  height:3.3rem;
}
.welcome3{
  left:0;
  top:0;
}
.welcome4{
  right:0;
  top:0;
}
.welcome5{
  left:0;
  bottom:0;
}
.welcome6{
  right:0;
  bottom:0;
}
.welcome3,.welcome4,.welcome5,.welcome6{
  z-index:2;
  position: absolute;
  width:1.6rem;
  height:1.6rem;
  animation-delay: 1s;
  animation-duration: 1.5s;
}
.code{
  position: absolute;
  width:3rem;
  height:3rem;
  top:26%;
  left:50%;
  margin-left:-1.5rem;
  animation-delay: 1s;
}
.line{
  position:absolute;
  bottom:30.555%;
  z-index:99999;
  width:100%;
  border-bottom:1px solid #FFF;
}
.bottom{
  position:absolute;
  bottom:0;
  left:0;
  z-index:3;
  width:100%;
  height:4.2rem;
  background-color:#56d1c8;
  animation-delay: 2s;
}
.trapezoid1{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  width:2rem;
  height:0;
  border-width:0 2rem 4.2rem 2rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffe869;
}
.trapezoid2{
  position:absolute;
  top:0;
  left:50%;
  transform: translateX(-50%);
  height:0;
  width:1.8rem;
  border-width:0 2rem 4.2rem 2rem;
  // border-width:0 1rem 1.8rem 1rem;
  border-style:none solid solid;
  border-color:transparent transparent #ffab6c;
}
.logo{
  position:absolute;
  width:1.2rem;
  display:block;
  left:50%;
  margin-left:-.6rem;
  bottom:25%;
}
.screen-title{
  width:3.2rem;
  position:absolute;
  display:block;
  left:50%;
  margin-left:-1.6rem;
  bottom:51.5%;
  animation-delay:1.8s;
}
// 312*648
.screen{
  position:absolute;
  bottom:82%;
  left:50%;
  transform: translateX(-50%);
  border:.1rem solid #FFF;
  width:2.1rem;
  height:4.36154rem;
  z-index:1;
  .head-list{
    width:100%;
    height:100%;
    position:absolute;
    overflow:hidden;
    left:0;
    top:0;
  }
  img{
    position: absolute;
    bottom:0;
    width:100%;
  }
}
.fade1-enter-active, .fade1-leave-active {
  transition: opacity 2s
}
.fade1-enter, .fade1-leave-to {
  opacity: .33
}
</style>
